<template>
	<div class="analysis-container">
		<el-card class="box-card">
			<el-button type="primary" @click="goBack">返回</el-button>

			<el-divider></el-divider>
			<div class="card-header">
				<div class="filter-section">
					<el-select
						v-model="selectedYear"
						placeholder="请选择学年"
						class="filter-item"
						style="width: 150px"
						:loading="isLoading"
					>
						<el-option v-for="year in academicYears" :key="year" :label="year" :value="year" />
					</el-select>
					<el-select
						v-model="selectedClass"
						placeholder="请选择班级"
						class="filter-item"
						style="width: 62vh"
						:loading="isLoading"
					>
						<el-option
							v-for="item in classList"
							:key="item.id"
							:label="item.className"
							:value="item.id"
						/>
					</el-select>
					<el-select
						v-model="selectedSubject"
						placeholder="请选择科目"
						style="width: 200px"
						:loading="isLoading"
					>
						<el-option
							v-for="item in subjectList"
							:key="item.id"
							:label="item.subjectName"
							:value="item.id"
						/>
					</el-select>
					<el-button
						type="primary"
						@click="handleFilter"
						:loading="isLoading"
						:disabled="!allConditionsSelected"
						style="margin-left: 15px"
					>
						筛选
					</el-button>
				</div>
			</div>

			<!-- 添加选择提示 -->
			<div v-if="!allConditionsSelected" class="selection-tip">
				<el-alert title="请先选择完整的筛选条件" type="info" :closable="false" show-icon>
					<p>请依次选择学年、班级和科目后点击筛选按钮查看成绩分析报告</p>
				</el-alert>
			</div>

			<!-- 未筛选提示 -->
			<div v-if="allConditionsSelected && !hasFiltered" class="not-filtered-tip">
				<el-alert title="请点击筛选按钮" type="info" :closable="false" show-icon>
					<p>请点击筛选按钮获取成绩数据并生成分析报告</p>
				</el-alert>
			</div>

			<div
				v-loading="isLoading"
				class="preview-container"
				v-if="hasFiltered && scoreStats.totalStudents > 0"
			>
				<!-- 报告已存在的提示 -->
				<div v-if="isReportExist" class="report-exist-tip">
					<el-alert title="报告已存在" type="warning" :closable="false" show-icon>
						<p>试题分析报告已存在，无需重复生成。</p>
						<p>{{ existingReportInfo }}</p>
					</el-alert>
				</div>

				<!-- 报告模板 -->
				<div class="report-preview" v-else>
					<div class="report-header">
						<h2 class="text-center">试题分析报告</h2>
						<div class="report-info">
							<p>学年：{{ selectedYear }}</p>
							<p>学期：{{ getCurrentSemester() }}</p>
							<p>课程名称：{{ getSelectedSubjectName() }}</p>
							<p>班级名称：{{ getSelectedClassName() }}</p>
						</div>
					</div>

					<div class="report-content">
						<table class="report-table">
							<tbody>
								<tr>
									<td>实际参考人数</td>
									<td>{{ scoreStats.attendStudents }}</td>
									<td>班级人数</td>
									<td>{{ scoreStats.totalStudents }}</td>
								</tr>
								<tr>
									<td>及格率</td>
									<td>{{ scoreStats.passRate }}</td>
									<td>最高分</td>
									<td>{{ scoreStats.maxScore }}</td>
								</tr>
								<tr>
									<td>最低分</td>
									<td>{{ scoreStats.minScore }}</td>
									<td>平均分</td>
									<td>{{ scoreStats.avgScore }}</td>
								</tr>
							</tbody>
						</table>

						<div class="score-distribution">
							<h3>分数分布</h3>
							<table class="distribution-table">
								<tbody>
									<tr>
										<th>分数段</th>
										<th>人数</th>
										<th>百分比</th>
									</tr>
									<tr v-for="(value, key) in scoreStats.scoreDistribution" :key="key">
										<td>{{ key }}</td>
										<td>{{ value.count }}</td>
										<td>{{ value.percent }}</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="analysis-content">
							<h3>分析内容</h3>
							<table class="analysis-table">
								<tbody>
									<tr>
										<th class="text-left">
											1、对试题的总体评价：从命题符合教学大纲要求范围和教材包括的知识角度，对学生基本理论、基本技能考查程度，试题难易程度及题量等方面分析，解析命题优劣，提出改进意见；
										</th>
									</tr>
									<tr>
										<td>
											<div class="content-display text-left content-for-export">
												{{ reportForm.commentEvaluation }}
											</div>
											<el-input
												v-model="reportForm.commentEvaluation"
												type="textarea"
												:rows="4"
												placeholder="请输入试题评价"
												:autosize="{ minRows: 4, maxRows: 8 }"
												class="input-for-editing"
											/>
										</td>
									</tr>
									<tr>
										<th class="text-left">
											2、成绩分析：根据成绩分布对学生答题情况及课程内容掌握情况进行分析，对教学方法、手段、内容等方面分析，肯定有效措施和方法
										</th>
									</tr>
									<tr>
										<td>
											<div class="content-display text-left content-for-export">
												{{ reportForm.scoreAnalysis }}
											</div>
											<el-input
												v-model="reportForm.scoreAnalysis"
												type="textarea"
												:rows="4"
												placeholder="请输入成绩分析"
												:autosize="{ minRows: 4, maxRows: 8 }"
												class="input-for-editing"
											/>
										</td>
									</tr>
									<tr>
										<th class="text-left">3、存在的主要问题，今后改进的措施及建议</th>
									</tr>
									<tr>
										<td>
											<div class="content-display text-left content-for-export">
												{{ reportForm.existingIssues }}
											</div>
											<el-input
												v-model="reportForm.existingIssues"
												type="textarea"
												:rows="4"
												placeholder="请输入存在问题"
												:autosize="{ minRows: 4, maxRows: 8 }"
												class="input-for-editing"
											/>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="report-footer">
						<p>填表日期：{{ getCurrentDate() }}</p>
					</div>
				</div>
			</div>

			<!-- 无成绩数据提示 -->
			<div v-if="hasFiltered && scoreStats.totalStudents === 0 && !isLoading" class="no-data-tip">
				<el-alert title="暂无成绩数据" type="warning" :closable="false" show-icon>
					<p>当前选择的条件下暂无成绩数据，请检查选择条件或联系管理员</p>
				</el-alert>
			</div>

			<div class="submit-section" v-if="hasFiltered && scoreStats.totalStudents > 0">
				<el-button
					type="primary"
					@click="handleSubmit"
					:loading="isSubmitting"
					:disabled="isReportExist || isSubmitting"
				>
					生成报告
				</el-button>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/index'
import { getScoreListBySpecificService } from '@/api/education/score'
import { getSubjectBySpecificService, getSubjectListService } from '@/api/education/subject'
import { getClassnameByIdService } from '@/api/education/classname'
import { getFileSpecificService } from '@/api/file'
import type { TScore } from '@/Types/score'
import { asBlob } from 'html-docx-js-typescript'
import dayjs from 'dayjs'
import { uploadFileService } from '@/api/file'

const router = useRouter()
const userStore = useUserStore()
const userId = userStore.userInfo.userInfo.userId

// 筛选条件
const selectedYear = ref('')
const selectedClass = ref()
const selectedSubject = ref()
const academicYears = ref<string[]>([])
const classList = ref<{ id: number; className: string }[]>([])
const subjectList = ref<{ id: number; subjectName: string }[]>([])

// 筛选状态
const hasFiltered = ref(false) // 是否已经执行过筛选

// 提交相关状态
const isSubmitting = ref(false)
const reportForm = ref({
	commentEvaluation: '',
	scoreAnalysis: '',
	existingIssues: ''
})

// 报告存在状态
const isReportExist = ref(false)
const existingReportInfo = ref('')
const existingReports = ref<FileRecord[]>([]) // 存储所有已存在的报告
const isLoading = ref(false) // 添加loading状态

// 成绩数据相关
const filteredScores = ref<TScore[]>([])
const scoreStats = ref({
	totalStudents: 0,
	attendStudents: 0,
	passRate: '0%',
	avgScore: '0',
	maxScore: '0',
	minScore: '0',
	scoreDistribution: {
		'90-100': { count: 0, percent: '0%' },
		'80-89': { count: 0, percent: '0%' },
		'70-79': { count: 0, percent: '0%' },
		'60-69': { count: 0, percent: '0%' },
		'60以下': { count: 0, percent: '0%' }
	}
})

// 计算属性：检查是否所有条件都已选择
const allConditionsSelected = computed(() => {
	return selectedYear.value && selectedClass.value && selectedSubject.value
})

// 定义分数分布类型
type ScoreDistribution = {
	'90-100': { count: number; percent: string }
	'80-89': { count: number; percent: string }
	'70-79': { count: number; percent: string }
	'60-69': { count: number; percent: string }
	'60以下': { count: number; percent: string }
}

// 定义文件记录类型
type FileRecord = {
	id: number
	fileName: string
	fileType: string
	uploadTime: string
	[key: string]: any
}

// 获取当前学期
const getCurrentSemester = () => {
	const currentMonth = new Date().getMonth() + 1
	return currentMonth >= 8 || currentMonth <= 1 ? '第一学期' : '第二学期'
}

// 获取当前日期
const getCurrentDate = () => {
	return dayjs().format('YYYY年MM月DD日')
}

// 获取选中的班级名称
const getSelectedClassName = () => {
	return classList.value.find((c) => c.id === selectedClass.value)?.className || ''
}

// 获取选中的科目名称
const getSelectedSubjectName = () => {
	return subjectList.value.find((s) => s.id === selectedSubject.value)?.subjectName || ''
}

// 获取当前报告的文件名
const getReportFileName = () => {
	return `${selectedYear.value}-${getSelectedClassName()}-${getSelectedSubjectName()}-成绩分析报告.docx`
}

// 生成学年数据
const generateAcademicYears = () => {
	const currentDate = new Date()
	const currentYear = currentDate.getFullYear()
	const currentMonth = currentDate.getMonth()

	const years: string[] = []

	// 生成最近7年的学年数据
	for (let i = 3; i >= -3; i--) {
		let startYear: number
		if (currentMonth >= 8) {
			// 当前是新学年（9月及以后）
			startYear = currentYear - i
		} else {
			// 当前是上学年（1-8月）
			startYear = currentYear - i - 1
		}
		years.push(`${startYear}-${startYear + 1}`)
	}

	academicYears.value = years
	// 设置默认选中当前学年
	if (academicYears.value.length > 0) {
		// selectedYear.value = academicYears.value[0]
		selectedYear.value = '2023-2024'
	}
}

// 获取班级信息
const fetchClassInfo = async () => {
	try {
		isLoading.value = true
		const userStore = useUserStore()
		const classIdList: number[] = userStore.userInfo.userInfo.classIdList

		if (!classIdList || classIdList.length === 0) {
			ElMessage.warning('未找到关联的班级信息')
			return
		}

		const promises = classIdList.map((id) => getClassnameByIdService(id))
		const res = await Promise.all(promises)
		classList.value = res.map((item) => ({
			id: item.data.data.classId,
			className: `${item.data.data.academy}-${item.data.data.major}-${item.data.data.grade}级-${item.data.data.classname}班`
		}))
	} catch (error) {
		console.error('获取班级信息失败:', error)
		ElMessage.error('获取班级信息失败')
	} finally {
		isLoading.value = false
	}
}

// 获取科目信息
const fetchSubjectInfo = async () => {
	try {
		isLoading.value = true
		const res = await getSubjectListService()
		if (res.data.code === 1 && res.data.data) {
			console.log(res.data.data)
			subjectList.value = res.data.data.map((item: any) => ({
				id: item.id,
				subjectName: item.subject
			}))
		} else {
			ElMessage.error('获取科目信息失败')
		}
	} catch (error) {
		console.error('获取科目信息失败:', error)
		ElMessage.error('获取科目信息失败')
	} finally {
		isLoading.value = false
	}
}

// 获取所有报告数据
const fetchAllReports = async () => {
	try {
		const params = {
			userId,
			fileType: 'document'
		}
		const res = await getFileSpecificService(params)
		if (res.data.code === 1 && res.data.data) {
			existingReports.value = res.data.data
		} else {
			existingReports.value = []
		}
	} catch (error) {
		console.error('获取报告数据失败:', error)
		existingReports.value = []
	}
}

// 检查报告是否已存在
const checkReportExists = () => {
	if (!allConditionsSelected.value) {
		isReportExist.value = false
		existingReportInfo.value = ''
		return
	}

	const matchingReport = existingReports.value.find(
		(file) =>
			file.fileName &&
			file.fileName.includes(`${selectedYear.value}`) &&
			file.fileName.includes(getSelectedClassName()) &&
			file.fileName.includes(getSelectedSubjectName())
	)

	if (matchingReport) {
		isReportExist.value = true
		existingReportInfo.value = `已存在报告，上传时间：${matchingReport.uploadTime || '未知'}`
		ElMessage.warning(`已存在该班级该科目的成绩分析报告，请勿重复上传`)
	} else {
		isReportExist.value = false
		existingReportInfo.value = ''
	}
}

// 获取成绩数据
const fetchScoreData = async () => {
	if (!allConditionsSelected.value) {
		// 重置成绩统计
		scoreStats.value = {
			totalStudents: 0,
			attendStudents: 0,
			passRate: '0%',
			avgScore: '0',
			maxScore: '0',
			minScore: '0',
			scoreDistribution: {
				'90-100': { count: 0, percent: '0%' },
				'80-89': { count: 0, percent: '0%' },
				'70-79': { count: 0, percent: '0%' },
				'60-69': { count: 0, percent: '0%' },
				'60以下': { count: 0, percent: '0%' }
			}
		}
		return
	}

	try {
		isLoading.value = true
		const params = {
			academicYear: selectedYear.value,
			classId: selectedClass.value,
			subjectId: selectedSubject.value
		}
		const res = await getScoreListBySpecificService(params)
		if (res.data.code === 1 && res.data.data) {
			// 过滤出选中科目的成绩数据
			const filteredData = res.data.data.filter(
				(item: TScore) => item.subjectId === selectedSubject.value
			)
			updateScoreStats(filteredData)
		} else {
			// 重置成绩统计
			updateScoreStats([])
		}
	} catch (error) {
		console.error('获取成绩数据失败:', error)
		ElMessage.error('获取成绩数据失败')
		updateScoreStats([])
	} finally {
		isLoading.value = false
	}
}

// 更新成绩统计
const updateScoreStats = (data: TScore[]) => {
	if (!data.length) {
		scoreStats.value = {
			totalStudents: 0,
			attendStudents: 0,
			passRate: '0%',
			avgScore: '0',
			maxScore: '0',
			minScore: '0',
			scoreDistribution: {
				'90-100': { count: 0, percent: '0%' },
				'80-89': { count: 0, percent: '0%' },
				'70-79': { count: 0, percent: '0%' },
				'60-69': { count: 0, percent: '0%' },
				'60以下': { count: 0, percent: '0%' }
			}
		}
		return
	}

	const scores = data
		.map((item) => item.theoryTotal)
		.filter((score) => score !== null && score !== undefined)
	const totalStudents = data.length
	const attendStudents = scores.length
	const passCount = scores.filter((score) => score >= 60).length
	const passRate = attendStudents > 0 ? ((passCount / attendStudents) * 100).toFixed(2) + '%' : '0%'
	const avgScore =
		attendStudents > 0 ? (scores.reduce((a, b) => a + b, 0) / attendStudents).toFixed(2) : '0'
	const maxScore = attendStudents > 0 ? Math.max(...scores).toString() : '-Infinity'
	const minScore = attendStudents > 0 ? Math.min(...scores).toString() : 'Infinity'

	// 计算分数分布
	const distribution: ScoreDistribution = {
		'90-100': { count: 0, percent: '0%' },
		'80-89': { count: 0, percent: '0%' },
		'70-79': { count: 0, percent: '0%' },
		'60-69': { count: 0, percent: '0%' },
		'60以下': { count: 0, percent: '0%' }
	}

	scores.forEach((score) => {
		if (score >= 90) distribution['90-100'].count++
		else if (score >= 80) distribution['80-89'].count++
		else if (score >= 70) distribution['70-79'].count++
		else if (score >= 60) distribution['60-69'].count++
		else distribution['60以下'].count++
	})

	// 计算百分比
	Object.keys(distribution).forEach((key) => {
		const scoreKey = key as keyof ScoreDistribution
		distribution[scoreKey].percent =
			attendStudents > 0
				? ((distribution[scoreKey].count / attendStudents) * 100).toFixed(2) + '%'
				: '0%'
	})

	scoreStats.value = {
		totalStudents,
		attendStudents,
		passRate,
		avgScore,
		maxScore,
		minScore,
		scoreDistribution: distribution
	}
}

// 处理筛选按钮点击事件
const handleFilter = async () => {
	if (!allConditionsSelected.value) {
		ElMessage.warning('请先选择完整的筛选条件')
		return
	}

	// 设置已筛选状态
	hasFiltered.value = true

	// 重置表单内容
	reportForm.value = {
		commentEvaluation: '',
		scoreAnalysis: '',
		existingIssues: ''
	}

	// 获取成绩数据和检查报告
	await Promise.all([fetchScoreData(), checkReportExists()])

	if (scoreStats.value.totalStudents > 0) {
		ElMessage.success('筛选完成，数据已加载')
	}
}

// 提交报告
const handleSubmit = async () => {
	// 检查报告是否存在
	checkReportExists()
	if (isReportExist.value) {
		ElMessage.warning('该报告已存在，请勿重复上传')
		return
	}

	// 验证表单
	if (!reportForm.value.commentEvaluation.trim()) {
		ElMessage.warning('请输入试题评价')
		return
	}
	if (!reportForm.value.scoreAnalysis.trim()) {
		ElMessage.warning('请输入成绩分析')
		return
	}
	if (!reportForm.value.existingIssues.trim()) {
		ElMessage.warning('请输入存在问题')
		return
	}

	isSubmitting.value = true
	try {
		// 获取预览区域的HTML内容
		const previewElement = document.querySelector('.report-preview')
		if (!previewElement) {
			throw new Error('未找到预览内容')
		}

		// 创建一个克隆的DOM元素用于导出
		const exportElement = previewElement.cloneNode(true) as HTMLElement

		// 处理输入框和显示内容
		const inputContainers = exportElement.querySelectorAll('.input-for-editing')
		inputContainers.forEach((el) => {
			el.remove() // 移除所有输入框
		})

		// 显示所有导出内容
		const contentElements = exportElement.querySelectorAll('.content-for-export')
		contentElements.forEach((el) => {
			el.classList.remove('content-for-export')
			el.classList.add('visible-content')
		})

		// 将用户输入的内容转换为纯文本
		exportElement.querySelectorAll('.visible-content').forEach((el) => {
			const text = el.textContent || ''
			el.innerHTML = text.replace(/\n/g, '<br>')
		})

		// 添加Word文档样式
		const htmlContent = `
			<html>
				<head>
					<style>
						body { 
							font-family: "Microsoft YaHei", sans-serif;
							margin: 0;
							padding: 0;
						}
						.report-preview {
							padding: 10px;
						}
						.report-header {
							margin-bottom: 10px;
							text-align: center;
						}
						.report-header h2 {
							margin: 0 0 5px 0;
							font-size: 16px;
							text-align: center;
						}
						.report-info {
							margin-bottom: 10px;
							text-align: left;
						}
						.report-info p {
							margin: 3px 0;
							font-size: 12px;
							text-align: left;
						}
						table { 
							border-collapse: collapse; 
							width: 100%; 
							margin-bottom: 10px; 
						}
						th, td { 
							border: 1px solid #000; 
							padding: 3px 5px;
							font-size: 10px;
						}
						td {
							text-align: center;
						}
						th { 
							background-color: #f2f2f2; 
							text-align: left;
						}
						.text-center { 
							text-align: center !important; 
						}
						.text-left {
							text-align: left !important;
						}
						.analysis-table th { 
							text-align: left !important;
							padding: 10px;
							font-size: 12px;
						}
						.analysis-table td { 
							text-align: left !important;
							padding: 10px;
						}
						.visible-content {
							display: block;
							padding: 10px;
							font-size: 10px;
							text-align: left !important;
							white-space: pre-wrap;
						}
						h3 {
							margin: 10px 0;
							font-size: 14px;
							text-align: left;
						}
						.report-footer {
							margin-top: 10px;
							text-align: right;
						}
					</style>
				</head>
				<body>
					${exportElement.innerHTML}
				</body>
			</html>
		`

		// 转换为Word文档
		const blob = await asBlob(htmlContent, {
			orientation: 'portrait',
			margins: {
				top: 500,
				right: 500,
				bottom: 500,
				left: 500
			}
		})

		// 文件名
		const fileName = getReportFileName()

		const file = new File([blob], fileName, {
			type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
		})
		const fd = new FormData()
		fd.append('file', file)
		fd.append('userId', userId)
		fd.append('fileType', 'document')

		const res = await uploadFileService(fd)
		if (res.data.code === 1) {
			ElMessage.success('报告生成成功')
			goBack()
		} else {
			ElMessage.error('报告生成失败，请重试')
		}
	} catch (error) {
		console.error('生成报告失败:', error)
		ElMessage.error('报告生成失败，请重试')
	} finally {
		isSubmitting.value = false
	}
}

// 返回上一页
const goBack = () => {
	router.back()
}

onMounted(async () => {
	// 初始化基础数据
	generateAcademicYears()
	await Promise.all([fetchClassInfo(), fetchSubjectInfo(), fetchAllReports()])
})

// 在 script setup 部分添加
const editing = ref({
	commentEvaluation: false,
	scoreAnalysis: false,
	existingIssues: false
})

const startEditing = (field: keyof typeof editing.value) => {
	editing.value[field] = true
}

const stopEditing = (field: keyof typeof editing.value) => {
	editing.value[field] = false
}
</script>

<style lang="scss" scoped>
.el-divider {
	margin: 10px;
}

.analysis-container {
	padding: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.filter-section {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
	width: 100%;
}

.filter-item {
	width: 250px;
}

.selection-tip {
	margin: 20px 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.not-filtered-tip {
	margin: 20px 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.no-data-tip {
	margin: 20px 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.preview-container {
	margin-top: 20px;
	padding: 20px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	background-color: #fff;
}

.report-exist-tip {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.report-preview {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.report-header {
	text-align: center;
	margin-bottom: 30px;

	h2 {
		margin-bottom: 20px;
		color: #303133;
		font-size: 24px;
	}
}

.report-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.report-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;

	td {
		padding: 10px;
		border: 1px solid #dcdfe6;
		text-align: center;
	}
}

.score-distribution {
	margin-top: 30px;

	h3 {
		margin-bottom: 15px;
		color: #303133;
		font-size: 18px;
	}
}

.distribution-table {
	width: 100%;
	border-collapse: collapse;

	th,
	td {
		padding: 10px;
		border: 1px solid #dcdfe6;
		text-align: center;
	}

	th {
		background-color: #f5f7fa;
		color: #606266;
	}
}

.report-footer {
	margin-top: 30px;
	text-align: right;
	color: #909399;
}

.submit-section {
	margin-top: 20px;
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.analysis-content {
	margin-top: 30px;

	h3 {
		margin-bottom: 20px;
		color: #303133;
		font-size: 18px;
		text-align: left;
	}
}

.analysis-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;

	th,
	td {
		padding: 16px;
		border: 1px solid #dcdfe6;
		text-align: left;
	}

	th {
		background-color: #f5f7fa;
		color: #606266;
		font-weight: normal;
		width: 100%;
		font-size: 15px;
		line-height: 1.5;
		padding: 18px 20px;
		text-align: left;
	}

	td {
		color: #666;
		width: 100%;
		padding: 6px;
		background-color: #fff;

		.content-display {
			padding: 18px 20px;
			line-height: 1.6;
			font-size: 14px;
			min-height: 20px;
			white-space: pre-wrap;
		}

		.content-for-export {
			display: none;
		}

		.visible-content {
			display: block;
		}

		:deep(.el-textarea__inner) {
			border: none;
			border-radius: 0;
			padding: 18px 20px;
			line-height: 1.6;
			font-size: 14px;
			background-color: #fff;
			transition: all 0.3s ease;
			min-height: 120px;

			&:hover {
				background-color: #83c8dd;
			}

			&:focus {
				border: none;
				box-shadow: none;
				background-color: #fcfcfc;
				outline: 2px solid #409eff;
				outline-offset: -2px;
			}

			&::placeholder {
				color: #909399;
			}
		}
	}
}

// 添加导出样式
:deep(.content-for-export) {
	display: none !important;
}

:deep(.visible-content) {
	display: block !important;
}
</style>
